// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
// Здесь будет описано главное (и единственное)
// окно программы. 
// Содержать оно будет вертикальный список и
// полосу прокрутки, ради которой и затевался
// весь этот пример.
Rectangle {
	id: rectangle2
	width: 200
	height: 200
	
	// Объявляю элемент полосы прокрутки. Он был
	// описан в предыдущем файле.
	Scrollbar {
		id: scrollbar
		// Привяжу левый край нашего элемента к 
		// правому краю списка. Да да, полоса будет
		// справа от списка. На положение элементов
		// влияет не порядок их объявления а значения
		// полей x, y и якорей.
		anchors.left: list_view1.right
		// Привяжу верх к верх, а низ к низу. Помните,
		// в Scrollbar.qml не указана высота. Её надо 
		// задать во внешнем коде т.е. здесь.
		anchors.bottom: parent.bottom
		anchors.top: parent.top
	}
	
	// Теперь объявлю элемент отображающий список.
	ListView {
		id: list_view1
		// Привяжу края элемента к краям окна, оставив
		// справа 15 пикселей для полосы прокрутки.
		anchors.right: parent.right
		anchors.rightMargin: 15
		anchors.left: parent.left
		anchors.bottom: parent.bottom
		anchors.top: parent.top
		
		// Создам модель с данными, сразу
		// передав её в поле model. Обычно модель
		// получают извне.
		// Каждый элемент модели — пара значений:
		// название цвета и его код.
		model: ListModel {
			ListElement { name: "Серый";        colorCode: "grey" }
			ListElement { name: "Красный";         colorCode: "red" }
			ListElement { name: "Синий";        colorCode: "blue" }
			ListElement { name: "Зелёный";       colorCode: "green" }
			ListElement { name: "Чёрный";       colorCode: "black" }
			ListElement { name: "Белый";       colorCode: "white" }
			ListElement { name: "Оранжевый";      colorCode: "orange" }
			ListElement { name: "Фиолетовый";      colorCode: "purple" }
			ListElement { name: "Коричневый";       colorCode: "brown" }
			ListElement { name: "Жёлтый";      colorCode: "yellow" }
			ListElement { name: "Розовый";        colorCode: "pink" }
			ListElement { name: "Светлосерый";  colorCode: "lightgrey" }
			ListElement { name: "Голубой";  colorCode: "lightblue" }
			ListElement { name: "Светлозелёный"; colorCode: "lightgreen" }
		}
		// Далее опишу делегат отображающий один элемент
		// списка. 
		delegate:  Row {
			id: row1
			height: 40
			// Создам цветной прямоугольник согласно коду 
			// цвета
			Rectangle { width: 40; height: 40;  color: colorCode }
			// Выведу текст с названием цвета.
			Text { text: name; anchors.verticalCenter: parent.verticalCenter; font.bold: true }
		}
		
		// Теперь самое интересное. Нам надо изменять
		// позицию списка согласно полосе прокрутки.
		// Создам поле — псевдоним для поля scrollbar.position.
		// Помните, именно оно хранит позицию полосы.
		property alias vericalCoef: scrollbar.position
		// В qml для каждого поля реализован автоматический
		// вызов обработчика при изменении значения этого
		// поля. Достаточно передать свой код в поле вида
		// on[Имя]Changed. Но такое работает только внутри 
		// элемента. Поэтому я и объявил выше псевдоним.
		// Теперь при изменении scrollbar.position вычисляю 
		// номер элемента списка, который должен быть
		// отображён и передаю его в метод positionViewAtIndex
		onVericalCoefChanged: positionViewAtIndex(count * vericalCoef, ListView.Beginning);
	}
}
